let staff_box = document.querySelector("#staff-box");
let staff_model = document.querySelector("#staff-model");
staff_box.addEventListener("mousedown", function (e) {
    let x = e.pageX - staff_model.offsetLeft;
    let y = e.pageY - staff_model.offsetTop;

    document.addEventListener("mousemove", move);
    function move(e) {
        staff_model.style.left = e.pageX - x + 'px';
        staff_model.style.top = e.pageY - y + 'px';
    }

    document.addEventListener("mouseup", function (e) {
        document.removeEventListener("mousemove", move);
    })
});

function model_line_with_parameters(obj_id) {
    document.getElementById("staff-select").style.display = "table-row";
    document.getElementById("finish_with").setAttribute("onclick", "IdentifyPersonnel('"+obj_id+"')");
    navigation_query('1');
}

function model_line() {
    document.getElementById("selected-div").innerHTML = "";
    document.getElementById('selected-number').innerHTML = 0;
    document.getElementById("select-all").checked = false;
    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
    checkboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
    document.getElementById("staff-select").style.display = "table-row";
    navigation_query('1');
}

function close_model() {
    document.getElementById("staff-select").style.display = "none";
}

function fa_click(obj) {
    var ev = window.event || arguments.callee.caller.arguments[0];
    if (window.event) ev.cancelBubble = true;
    else {
        ev.stopPropagation();
    }
    var job_number = obj.id.split('-')[1];
    var choose_person_list = document.getElementsByClassName("choose_person");
    for (var i=0; i<choose_person_list.length; i++) {
        choose_person_list[i].checked = false;
    }
    obj.querySelector('input').checked = true;
    document.getElementById("selected-div").innerHTML = "";
    var this_name = obj.title;
    var html_str = `
        <div id="selected-`+job_number+`" class="SelectedPersonnel" style="width: 70px;height: 40px;display: inline-block;vertical-align: top;margin-left: 10px;text-align: center;position: relative;background: #E8E8E8;margin-top: 8px;">
            <div id="close" onclick="remove_selected(`+job_number+`)" style="width: 15px;height: 15px;background: #cfcfcf;border-radius: 50%;line-height: 14px;cursor: pointer;">
                <i class="iconfont icon-quchu" style="font-size: 12px;color: white;"></i>
            </div>
            <p class="selected-personnel" style="height: 15px;margin-top: 0;">`+this_name+`</p>
        </div>
    `
    $('#selected-div').append(html_str);
    scrollConversationScreen();
    document.getElementById('selected-number').innerHTML = document.getElementsByClassName('selected-personnel').length;
}

function son_click(obj) {
    var ev = window.event || arguments.callee.caller.arguments[0];
    if (window.event) ev.cancelBubble = true;
    else {
        ev.stopPropagation();
    }
    var choose_person_list = document.getElementsByClassName("choose_person");
    for (var i=0; i<choose_person_list.length; i++) {
        choose_person_list[i].checked = false;
    }
    obj.checked = true;
    document.getElementById("selected-div").innerHTML = "";
    var job_number = obj.id.split('-')[1];
    if (obj.checked) {
        var this_name = obj.title;
        var html_str = `
            <div id="selected-`+job_number+`" class="SelectedPersonnel" style="width: 70px;height: 40px;display: inline-block;vertical-align: top;margin-left: 10px;text-align: center;position: relative;background: #E8E8E8;margin-top: 8px;">
                <div id="close" onclick="remove_selected(`+job_number+`)" style="width: 15px;height: 15px;background: #cfcfcf;border-radius: 50%;line-height: 14px;cursor: pointer;">
                    <i class="iconfont icon-quchu" style="font-size: 12px;color: white;"></i>
                </div>
                <p class="selected-personnel" style="height: 15px;margin-top: 0;">`+this_name+`</p>
            </div>
        `
        $('#selected-div').append(html_str);
        scrollConversationScreen();
    }else {
        document.getElementById('selected-'+job_number).remove();
    }
    document.getElementById('selected-number').innerHTML = document.getElementsByClassName('selected-personnel').length;
}

function change_navigation(obj) {
    document.getElementById('select-all').checked = false;
    obj.className = 'navigation navigation_color';
    if (obj.id === 'dep') {
        document.getElementById('limits').className = 'navigation';
        document.getElementById('fun').className = 'navigation';
        navigation_query('1');
    }else if (obj.id === 'limits') {
        document.getElementById('dep').className = 'navigation';
        document.getElementById('fun').className = 'navigation';
        navigation_query('2');
    }else {
        document.getElementById('dep').className = 'navigation';
        document.getElementById('limits').className = 'navigation';
        navigation_query('3');
    }
}

function choose_dep(obj) {
    document.getElementById('select-all').checked = false;
    document.getElementsByClassName("company_class company_color")[0].className = 'company_class';
    obj.className = 'company_class company_color';
    var OneNavigation = document.getElementsByClassName('navigation navigation_color')[0].id;
    var xhr = new XMLHttpRequest();
    var local_host = window.location.host;          // 获取当前IP
    xhr.open('post', "/technological/secondary_navigation", true);
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.send("curr_id="+String(obj.id)+"&OneNavigation="+String(OneNavigation));
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                var JsonDate = JSON.parse(xhr.responseText);
                console.log(JsonDate)
                CreateThreeNavigation(JsonDate);
            }
        }
    };
}

function navigation_query(Navigation_type) {
    var xhr = new XMLHttpRequest();
    var local_host = window.location.host;          // 获取当前IP
    xhr.open('post', "/technological/NavigationQuery", true);
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.send("Navigation_type="+String(Navigation_type));
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                var JsonDate = JSON.parse(xhr.responseText);
                console.log(JsonDate)
                CreateSecondaryNavigation(JsonDate);
            }
        }
    };
}

function CreateSecondaryNavigation(ObjData) {
    document.getElementById('SecondaryNavigation').innerHTML = "";
    for (var i=0; i<ObjData['objs'].length; i++) {
        if (ObjData['objs'][i]['flag'] === 'true') {
            var class_name = 'company_class company_color';
        }else {
            class_name = 'company_class';
        }
        var html_str = `
            <div class="`+class_name+`" id="`+ObjData['objs'][i]['id']+`" title="`+ObjData['objs'][i]['name']+`" onclick="choose_dep(this)">&nbsp;&nbsp;&nbsp;`+ObjData['objs'][i]['name']+`</div>
        `
        $("#SecondaryNavigation").append(html_str)
    }
    document.getElementById('ThreeNavigation').innerHTML = "";
    for (var j=0; j<ObjData['people_list'].length; j++) {
        if (document.getElementById("selected-"+ObjData['people_list'][j]['job_number'])) {
            var HtmlStr = `
                <div class="personnel_class" onclick="fa_click(this)" id="`+ObjData['people_list'][j]['id']+`-`+ObjData['people_list'][j]['job_number']+`" title="`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)">
                    <input type="checkbox" id="select-`+ObjData['people_list'][j]['job_number']+`" class="choose_person" onclick="son_click(this)" title="`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)" checked>&nbsp;&nbsp;&nbsp;`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)
                </div>
            `
        }else {
            HtmlStr = `
                <div class="personnel_class" onclick="fa_click(this)" id="`+ObjData['people_list'][j]['id']+`-`+ObjData['people_list'][j]['job_number']+`" title="`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)">
                    <input type="checkbox" id="select-`+ObjData['people_list'][j]['job_number']+`" class="choose_person" onclick="son_click(this)" title="`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)">&nbsp;&nbsp;&nbsp;`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)
                </div>
            `
        }
        $("#ThreeNavigation").append(HtmlStr)
    }
    var choose_person_list = document.getElementsByClassName('choose_person');
    var flag = true;
    for (var k=0; k<choose_person_list.length; k++) {
        if (!choose_person_list[k].checked) {
            flag = false;
        }
     }
    if (flag) {
        document.getElementById('select-all').checked = true;
     }
}

function CreateThreeNavigation(ObjData) {
    document.getElementById('ThreeNavigation').innerHTML = "";
    for (var j=0; j<ObjData['people_list'].length; j++) {
        if (document.getElementById("selected-"+ObjData['people_list'][j]['job_number'])) {
            var HtmlStr = `
                <div class="personnel_class" onclick="fa_click(this)" id="`+ObjData['people_list'][j]['id']+`-`+ObjData['people_list'][j]['job_number']+`" title="`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)">
                    <input type="checkbox" id="select-`+ObjData['people_list'][j]['job_number']+`" class="choose_person" onclick="son_click(this)" title="`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)" checked>&nbsp;&nbsp;&nbsp;`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)
                </div>
            `
        }else {
            HtmlStr = `
                <div class="personnel_class" onclick="fa_click(this)" id="`+ObjData['people_list'][j]['id']+`-`+ObjData['people_list'][j]['job_number']+`" title="`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)">
                    <input type="checkbox" id="select-`+ObjData['people_list'][j]['job_number']+`" class="choose_person" onclick="son_click(this)" title="`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)">&nbsp;&nbsp;&nbsp;`+ObjData['people_list'][j]['real_name']+`(`+ObjData['people_list'][j]['job_number']+`)
                </div>
            `
        }
        $("#ThreeNavigation").append(HtmlStr)
    }
    var choose_person_list = document.getElementsByClassName('choose_person');
    var flag = true;
    for (var k=0; k<choose_person_list.length; k++) {
        if (!choose_person_list[k].checked) {
            flag = false;
        }
    }
    if (flag) {
        document.getElementById('select-all').checked = true;
    }
}

function SelectAll(obj) {
    var choose_person_list = document.getElementsByClassName('choose_person');
    if (obj.checked) {
        for (var i=0; i<choose_person_list.length; i++) {
            choose_person_list[i].checked = true;
            var job_number = choose_person_list[i].id.split('-')[1];
            if (!document.getElementById("selected-"+job_number)) {
                var this_name = choose_person_list[i].title;
                var html_str = `
                    <div id="selected-`+job_number+`" class="SelectedPersonnel" style="width: 70px;height: 40px;display: inline-block;vertical-align: top;margin-left: 10px;text-align: center;position: relative;background: #E8E8E8;margin-top: 8px;">
                        <div id="close" onclick="remove_selected(`+job_number+`)" style="width: 15px;height: 15px;background: #cfcfcf;border-radius: 50%;line-height: 14px;cursor: pointer;">
                            <i class="iconfont icon-quchu" style="font-size: 12px;color: white;"></i>
                        </div>
                        <p class="selected-personnel" style="height: 15px;margin-top: 0;">`+this_name+`</p>
                    </div>
                `
                $('#selected-div').append(html_str)
            }
        }
        scrollConversationScreen();
    }else {
        for (var j=0; j<choose_person_list.length; j++) {
            choose_person_list[j].checked = false;
            job_number = choose_person_list[j].id.split('-')[1];
            document.getElementById('selected-'+job_number).remove();
        }
    }
    document.getElementById('selected-number').innerHTML = document.getElementsByClassName('selected-personnel').length;
}

function remove_selected(obj_id) {
    document.getElementById('selected-'+obj_id).remove();
    if (document.getElementById('select-'+obj_id)) {
        document.getElementById('select-'+obj_id).checked = false;
    }
    var choose_person_list = document.getElementsByClassName('choose_person');
    var flag = false;
    for (var j=0; j<choose_person_list.length; j++) {
        if (!choose_person_list[j].checked) {
            flag = true;
        }
    }
    if (flag) {
        document.getElementById('select-all').checked = false;
    }else {
        document.getElementById('select-all').checked = true;
    }
}

function SearchDepartment() {
    var search_value = document.getElementById('SearchDep').value;
    var event = arguments.callee.caller.arguments[0] || window.event; //调节浏览器兼容
    if (event.keyCode === 13) {
        var search_result = document.getElementById("SecondaryNavigation");search_result.innerHTML = "";
        var xhr = new XMLHttpRequest();
        var local_host = window.location.host;          // 获取当前IP
        xhr.open('post', "/technological/search_department", true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send("search_value="+String(search_value));
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var JsonDate = JSON.parse(xhr.responseText);
                    console.log(JsonDate)
                    CreateSecondaryNavigation(JsonDate);
                }
            }
        };
    }
}

function SearchProple() {
    var Dep_value = document.getElementById('SearchDep').value;
    var search_value = document.getElementById('SearchPeo').value;
    var event = arguments.callee.caller.arguments[0] || window.event; //调节浏览器兼容
    if (event.keyCode === 13) {
        var search_result = document.getElementById("ThreeNavigation");search_result.innerHTML = "";
        var xhr = new XMLHttpRequest();
        var local_host = window.location.host;          // 获取当前IP
        xhr.open('post', "/technological/search_personnel", true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send("search_value="+String(search_value)+"&Dep_value="+String(Dep_value));
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var JsonDate = JSON.parse(xhr.responseText);
                    console.log(JsonDate)
                    CreateThreeNavigation(JsonDate);
                }
            }
        };
    }
}